<!DOCTYPE html>
<html>
<head>
<title>Elliptical Orbit Diagram</title>
</head>
<body>
<canvas id="orbitCanvas" width="600" height="450" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('orbitCanvas');
    const ctx = canvas.getContext('2d');

    // Style and settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;

    // Geometry
    const cx = 300;
    const cy = 225;
    const a = 200; // Semi-major axis
    const b = 130; // Semi-minor axis
    const earthX = cx + 80; // Position of Earth
    const pAngle = 2.2; // Angle for point P
    const pX = cx + a * Math.cos(pAngle);
    const pY = cy - b * Math.sin(pAngle); // y-axis is inverted in canvas

    // Helper function to draw a point (filled circle)
    function drawPoint(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fill();
    }

    // Helper function to draw a line with an arrow head at the end
    function drawArrow(fromX, fromY, toX, toY) {
        const headlen = 10;
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
    }

    // Main drawing starts here

    // 1. Draw Axes
    ctx.beginPath();
    ctx.moveTo(cx - a - 50, cy);
    ctx.lineTo(cx + a + 50, cy);
    ctx.moveTo(cx, cy - b - 50);
    ctx.lineTo(cx, cy + b + 50);
    ctx.stroke();

    // 2. Draw Ellipse
    ctx.beginPath();
    ctx.ellipse(cx, cy, a, b, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // 3. Define and Draw Points
    const D = { x: cx - a, y: cy };
    const E = { x: cx, y: cy - b };
    const F = { x: cx + a, y: cy };
    const G = { x: cx, y: cy + b };
    const P = { x: pX, y: pY };
    const Earth = { x: earthX, y: cy };

    drawPoint(D.x, D.y);
    drawPoint(E.x, E.y);
    drawPoint(F.x, F.y);
    drawPoint(G.x, G.y);
    drawPoint(P.x, P.y);
    drawPoint(Earth.x, Earth.y);

    // 4. Draw Labels for points
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('D', D.x - 20, D.y);
    ctx.fillText('E', E.x + 20, E.y - 5);
    ctx.fillText('F', F.x + 20, F.y);
    ctx.fillText('G', G.x, G.y + 25);
    ctx.fillText('P', P.x - 5, P.y - 20);

    ctx.font = '22px KaiTi, SimHei'; // Use a font that supports Chinese characters
    ctx.fillText('地球', Earth.x, Earth.y + 30);

    // 5. Draw Dimension Lines
    ctx.lineWidth = 1.5;
    ctx.font = '24px Arial';

    // Dimension A
    const yA = cy + 55;
    const xA1 = D.x;
    const xA2 = cx;
    const mxA = (xA1 + xA2) / 2;
    ctx.beginPath();
    ctx.moveTo(xA1, yA - 10); ctx.lineTo(xA1, yA + 10); // Tick 1
    ctx.moveTo(xA2, yA - 10); ctx.lineTo(xA2, yA + 10); // Tick 2
    drawArrow(mxA, yA, xA1, yA); // Arrow from middle to left
    drawArrow(mxA, yA, xA2, yA); // Arrow from middle to right
    ctx.stroke();
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('A', mxA, yA - 2);

    // Dimension B
    const xB = cx - 40;
    const yB1 = E.y;
    const yB2 = cy;
    const myB = (yB1 + yB2) / 2;
    ctx.beginPath();
    ctx.moveTo(xB - 10, yB1); ctx.lineTo(xB + 10, yB1); // Tick 1
    ctx.moveTo(xB - 10, yB2); ctx.lineTo(xB + 10, yB2); // Tick 2
    drawArrow(xB, myB, xB, yB1); // Arrow from middle to top
    drawArrow(xB, myB, xB, yB2); // Arrow from middle to bottom
    ctx.stroke();
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('B', xB - 15, myB);

    // Dimension C
    const yC = cy - 40;
    const xC1 = Earth.x;
    const xC2 = Earth.x + 50;
    const mxC = (xC1 + xC2) / 2;
    ctx.beginPath();
    ctx.moveTo(xC1, yC - 10); ctx.lineTo(xC1, yC + 10); // Tick 1
    ctx.moveTo(xC2, yC - 10); ctx.lineTo(xC2, yC + 10); // Tick 2
    drawArrow(mxC, yC, xC1, yC); // Arrow from middle to left
    drawArrow(mxC, yC, xC2, yC); // Arrow from middle to right
    ctx.stroke();
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('C', mxC, yC - 2);

</script>
</body>
</html>